<template>
	<div>
		<a-modal
			v-model:open="open"
			title="添加接口"
			@ok="handleOk"
			okText="submit"
		>
			<a-form
				ref="formRef"
				:model="formState"
				:label-col="labelCol"
				:wrapper-col="wrapperCol"
			>
				<a-form-item
					label="接口名称"
					name="name"
					:rules="[{ required: true, message: '接口名是必填的哦' }]"
				>
					<a-input v-model:value="formState.name" />
				</a-form-item>
				<a-form-item
					label="接口描述"
					name="description"
					:rules="[{ required: true, message: '接口描述是必填的哦' }]"
				>
					<a-textarea v-model:value="formState.description" />
				</a-form-item>
				<a-form-item
					label="调用地址"
					name="url"
					:rules="[{ required: true }]"
				>
					<a-input v-model:value="formState.url" />
				</a-form-item>
				<a-form-item
					label="请求方法"
					name="method"
					:rules="[{ required: true, message: '请求方法要选一个' }]"
				>
					<a-radio-group v-model:value="formState.method">
						<a-radio value="GET">GET</a-radio>
						<a-radio value="POST">POST</a-radio>
						<a-radio value="DELETE">DELETE</a-radio>
						<a-radio value="OPTIONS">OPTIONS</a-radio>
						<a-radio value="HEAD">HEAD</a-radio>
						<a-radio value="PATCH">PATCH</a-radio>
						<a-radio value="PUT">PUT</a-radio>
						<a-radio value="CONNECT">CONNECT</a-radio>
					</a-radio-group>
				</a-form-item>
				<a-form-item
					label="请求头"
					name="requestHeader"
				>
					<a-textarea v-model:value="formState.requestHeader" />
				</a-form-item>
				<a-form-item
					label="请求参数"
					name="requestParams"
				>
					<a-textarea v-model:value="formState.requestParams" />
				</a-form-item>
				<a-form-item
					label="响应头"
					name="responseHeader"
				>
					<a-textarea v-model:value="formState.responseHeader" />
				</a-form-item>
			</a-form>
		</a-modal>
	</div>
	<div
		class="demo-page-header"
		style="background-color: #f5f5f5; padding: 24px"
	>
		<a-page-header
			:ghost="ghost"
			title="Title"
			sub-title="This is a subtitle"
			@back="() => $router.go(-1)"
		>
			<template #extra>
				<a-button
					key="1"
					type="primary"
					@click="showModal"
					>添加
				</a-button>
				<a-button key="2">Operation</a-button>
				<a-button
					key="3"
					type="primary"
					>Primary
				</a-button>
			</template>
			<a-descriptions
				size="small"
				:column="3"
			>
				<a-descriptions-item label="Created">Lili Qu</a-descriptions-item>
				<a-descriptions-item label="Association">
					<a>421421</a>
				</a-descriptions-item>
				<a-descriptions-item label="Creation Time">2017-01-10</a-descriptions-item>
				<a-descriptions-item label="Effective Time">2017-10-10</a-descriptions-item>
				<a-descriptions-item label="Remarks"> Gonghu Road, Xihu District, Hangzhou, Zhejiang, China </a-descriptions-item>
			</a-descriptions>
		</a-page-header>
	</div>
	<a-checkbox
		v-model:checked="ghost"
		style="margin-top: 0.5rem"
		>toggle ghost
	</a-checkbox>

	<div>
		<InterfaceInformationTable />
	</div>
</template>
<script setup lang="ts">
import type { UnwrapRef } from 'vue';
import { reactive, ref } from 'vue';
import { type FormInstance, message } from 'ant-design-vue';
import InterfaceInformationTable from '@/components/InterfaceInformationTable.vue';
import api from '@/api';
import InterfaceInfo = API.InterfaceInfo;

const formState: UnwrapRef<InterfaceInfo> = reactive({
	name: '',
	description: '',
	url: '',
	method: '',
	requestHeader: '',
	responseHeader: '',
	requestParams: '',
	status: 1,
});
const labelCol = { style: { width: '150px' } };
const wrapperCol = { span: 14 };
const ghost = ref(false);
const open = ref<boolean>(false);
const formRef = ref<FormInstance>();
const showModal = () => {
	open.value = true;
};
const handleOk = async () => {
	try {
		await formRef.value.validate();
		api.interfaceInfoController
			.addInterfaceInfo(formState)
			.then(() => {
				message.success('添加成功', 2);
				open.value = false;
			})
			.catch(error => {
				message.error(`添加失败:${error}`, 2);
			});
	} catch (errorInfo) {
		message.error('好像还有东西没填', 2);
		console.log('Failed:', errorInfo);
	}
};
</script>

<style scoped>
.demo-page-header :deep(tr:last-child td) {
	padding-bottom: 0;
}
</style>
